<template>
	<view class="navTabBox">
		<!-- 标题数量小于5 -->
		<view class="shortTab" v-if="tabTitle.length<=5">
			<!-- 导航栏 -->
			<view class='navTab'>
				<view v-for="(item,index) in tabTitle" :key="index" class='navTabItem' :class="index===tabClick?'click':''" @click='navClick(index)'>{{item}}</view>
			</view>
		</view>
		<!-- 标题数量大于5 开启长导航栏模式 -->
		<view class="longTab" v-if="tabTitle.length>5">
			<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" scroll-with-animation :scroll-into-view="toView">
				<view class="longItem" :data-index="index" :class="index===tabClick?'click':''" 
				v-for="(item,index) in tabTitle" :key="index" 
				:id="'id'+index" @click="longClick(index)">{{item}}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'navTab',
		props: {
			tabTitle: {
				type: Array,
				default: ()=>[]
			}
		},
		data() {
			return {
				tabClick: 0, 	//导航栏被点击
				toView:'id0'	//横向滚动(默认第一个)
			};
		},
		methods: {
			// 导航栏点击
			navClick(index) {
				// console.log('短',index)
				// this.$parent.currentTab = index 
				this.$emit('changeTab', index);//设置swiper的第几页
				this.tabClick = index //设置导航点击了哪一个
			},
			longClick(index){
				// console.log('长',index)
				var tempIndex = index - 2
				tempIndex = tempIndex<=0 ? 0 : tempIndex
				this.toView = `id${tempIndex}` //动画滚动,滚动至中心位置
				this.tabClick = index //设置导航点击了哪一个
				this.$emit('changeTab', index);//设置swiper的第几页
				// this.$parent.currentTab = index //设置swiper的第几页
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navTabBox {
		width: 100vw;
		font-size: 15px;
		color: #666666;
		// margin-bottom:20upx;
		.click {
			color: #333333;
			font-weight: bold;
			font-size: 16px;
			position: relative;
		}
		.click::after{
			content: " ";
			position: absolute;
			top: 26px;
			left:50%;
			// margin-left: -11px;
			transform: translateX(-50%);
			width: 21px;
			height: 12px;
			background: url('~@/static/search/tab_icon.png') no-repeat center;
			background-size: 50% 50%;
		}
		.longTab {
			width: 100%;
			.longItem{
				width:20vw; 
				height: 120upx; 
				display: inline-block;
				line-height: 120upx;
				text-align: center;
			}
		}
		.shortTab {
			width: 100%;
			.navTab {
				display: flex;
				width: 100%;
				height: 120upx;
				position: relative;
				align-items: center;
				justify-content: space-around;
				.navTabItem {
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all .2s;
				}
			}
		}
	}
</style>
